<template>
  <div class="bg">
    <!-- 顶部 -->
    <div class="header">
      <span class="header-title">换电柜</span>
      <span class="header-text">数据大屏平台</span>
      <el-button style="position: absolute;left:1400px;top: 28px" type="success" @click="goHome()">返回</el-button>
    </div>
    <!-- 内容 -->
    <div class="wrap">
      <!-- 左侧 -->
      <div class="left fl">
        <div class="left-header">
          <span>用户在线情况</span>
          <div id="left-header-nong" style="width: 100%;height: 100%;" class="left-header-nong" ref="userData"></div>
        </div>
        <div class="left-mid">
          <span>电池使用情况</span>
          <div id="left-mid-nong" style="width: 100%;height: 100%;" class="left-header-nong" ref="siteDataDom"></div>
        </div>
        <div class="left-bottom">
          <span>站点分布情况</span>
          <div id="left-bottom-nong" style="width: 100%;height: 100%;" class="left-header-nong" ref="siteSeate"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center fl">
        <!-- 地图 -->
        <div class="center-map">
          <div ref="allmap" style="width:100%;height:100%;"></div>
        </div>
        <!-- 离线清单 -->
        <div class="center-offline">
          <div class="center-offline-header">
            <p>电池使用清单</p>
          </div>
          <div class="center-offline-mid">
            <div class="title">
              <div class="sit sit-title fl">用户</div>
              <div class="sit sit-title fl">站点</div>
              <div class="sit sit-title fl">状态</div>
              <div class="sit sit-title fl">电话</div>
            </div>
            <!-- 自动滚动清单列表 -->
            <div class="list" id="list">
              <div class="rowup" id="rowup">
                                <ul class="list-item">
                                  <li class="fl sit-item">1</li>
                                  <li class="fl sit-item">一典桐</li>
                                  <li class="fl sit-item">在线</li>
                                  <li class="fl sit-item">13303247217</li>
                                </ul>
                                <ul class="list-item">
                                  <li class="fl sit-item">2</li>
                                  <li class="fl sit-item">qwee</li>
                                  <li class="fl sit-item">在线</li>
                                  <li class="fl sit-item">15033858450</li>
                                </ul>
                                <ul class="list-item">
                                  <li class="fl sit-item">3</li>
                                  <li class="fl sit-item">一典桐</li>
                                  <li class="fl sit-item">在线</li>
                                  <li class="fl sit-item">15613250922</li>
                                </ul>
                                <ul class="list-item">
                                  <li class="fl sit-item">4</li>
                                  <li class="fl sit-item">知安</li>
                                  <li class="fl sit-item">在线</li>
                                  <li class="fl sit-item">13941673457</li>
                                </ul>
              </div>
              <div class="rowupcope" id="rowupcope"></div>
            </div>
          </div>

          <!-- <div class="center-offline-bottom">
            <p>数据大屏</p>
          </div> -->
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right fr">
        <span class="right-title">站点详情</span>
        <div class="right-top">
          <div class="right-top-content">
            <span class="name">站名:</span>
            <span class="text" id="siteId">{{ siteName }}</span>
          </div>
          <div class="right-top-content">
            <span class="name">编号:</span>
            <span class="text" id="codeId">CLOO258</span>
          </div>
          <div class="right-top-content">
            <span class="name">地址:</span>
            <span class="text" id="addressId">中国</span>
          </div>
          <div class="right-top-content">
            <span class="name">状态:</span>
            <span class="text">健康</span>
          </div>
        </div>
        <div class="right-mid">
          <div class="right-mid-header">
            数据展示
          </div>
          <div class="right-mid-scroll">
            <div class="right-mid-content">
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">要素数:</span>-->
              <!--                <span class="text">7</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">观测时间:</span>-->
              <!--                <span class="text">2020-03-16 10:40:00</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">150cm气温:</span>-->
              <!--                <span class="text">33.4℃</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">150cm空气相对湿度</span>-->
              <!--                <span class="text">48.7%</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">5cm低温：</span>-->
              <!--                <span class="text">0.0℃</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">10cm低温：</span>-->
              <!--                <span class="text">18.1℃</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">20cm低温:</span>-->
              <!--                <span class="text">18.0℃</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">10cm土壤相对湿度:</span>-->
              <!--                <span class="text">46.3℃</span>-->
              <!--              </div>-->
              <!--              <div class="right-top-content">-->
              <!--                <span class="name">20cm土壤相对湿度:</span>-->
              <!--                <span class="text">46.3℃</span>-->
              <!--              </div>-->
            </div>
          </div>
          <a href="javascript:;" class="history" id="triggerBtn">查看历史记录</a>
        </div>
        <div class="right-bottom">
          <div class="right-mid-header">
            站点数据
          </div>
          <div class="right-bottom-content" ref="datc">

          </div>
          <a href="javascript:;" class="history-pic" id="triggerBtnpic">查看历史图片</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 模态框历史数据 -->

  <div id="myModal" class="modal">
    <div class="modal-content">
      <div class="model-header">查看历史记录</div>
      <div class="see">
        <div class="from fl">
          <div class="line fl">
            <span>站名：</span>
            <select name="name" id="" class="line-content">
              <option value="">观测站</option>
            </select>
          </div>
          <div class="line fl">
            <span>要素：</span>
            <select name="name" id="" class="line-content">
              <option value="">7</option>
            </select>
          </div>
          <div class="line fl">
            <span>开始时间:</span>
            <input type="text" name="date" id="date" lay-verify="date" placeholder="" autocomplete="off"
                   class="line-content"/>
          </div>
          <div class="line fl">
            <span>结束时间:</span>
            <input type="text" name="date" id="date1" lay-verify="date" placeholder="" autocomplete="off"
                   class="line-content"/>
          </div>
        </div>
        <div class="see-right fr">
          <div class="submit fr">
            <input type="button" class="button" value="导出">
          </div>
          <div class="submit fr query">
            <input type="button" class="button" value="查询">
          </div>
        </div>
      </div>
      <div class="date">
        <div class="date-content" id="date-content-wrap">
          <div id="data-content-line" style="width: 100%;height: 98%;" class="data-content-line"></div>
        </div>
      </div>

      <div id="closeBtn" class="close">X</div>
    </div>
  </div>
  <!-- 模态框历史图片 -->
  <div id="myModalpic" class="modalpic">
    <div class="modal-content">
      <div class="model-header">查看历史图片</div>
      <div class="see">
        <div class="from fl">
          <div class="line fl">
            <span>站名：</span>
            <select name="name" id="" class="line-content">
              <option value="">西红柿观测站</option>
            </select>
          </div>
          <div class="line fl">
            <span>要素：</span>
            <select name="name" id="" class="line-content">
              <option value="">7</option>
            </select>
          </div>
          <div class="line fl">
            <span>开始时间:</span>
            <input type="text" name="date" id="date2" lay-verify="date" placeholder="" autocomplete="off"
                   class="line-content"/>
          </div>
          <div class="line fl">
            <span>结束时间:</span>
            <input type="text" name="date" id="date3" lay-verify="date" placeholder="" autocomplete="off"
                   class="line-content"/>
          </div>
        </div>
        <div class="see-right fr">
          <div class="submit fr querypic">
            <input type="button" class="button" value="查询">
          </div>
        </div>
      </div>
      <!-- 历史图片 -->
      <div class="date">
        <div class="data-contentpic">
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
          <div class="date-content-pic fl">
            <img src="./img/lishitupian.jpg" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
          </div>
        </div>
      </div>

      <div id="closeBtnpic" class="close">X</div>
    </div>
  </div>

</template>
<script setup>
import * as echarts from 'echarts'
// 请确保在引入百度地图扩展之前已经引入百度地图 JS API 脚本并成功加载
// https://api.map.baidu.com/api?v=3.0&ak=你申请的AK
import 'echarts/extension/bmap/bmap'
import {onMounted, ref} from 'vue'

import {useRouter} from 'vue-router'
import {getAllSite, getSiteDataByName, getSiteSeataData} from '@/api/site'
// 请确保在引入百度地图扩展之前已经引入百度地图 JS API 脚本并成功加载
// https://api.map.baidu.com/api?v=3.0&ak=你申请的AK
import 'echarts/extension/bmap/bmap';
import {useRoute} from 'vue-router'
import request from "@/utils/request";
import {getAllUser} from "@/api/login";
import {getUseList} from "@/api/useBattery";
const siteSeate=ref()
const siteDataDom=ref();
const router = useRouter()
const allmap = ref()
const datc = ref();
const siteName=ref()
let data = []
let geoCoordMap = {}
const userData=ref()
onMounted(async () => {
  getData()
  getUsers()
  getSiteSeata()

  await getAllSite().then(even => {
    console.log(even.data.data)
    data = even.data.data
    geoCoordMap = even.data.map.data
    console.log(data, geoCoordMap)
  })
  console.log(data, geoCoordMap)
  var myChart = echarts.init(allmap.value)
  var option

  const convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name]
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        })
      }
    }
    return res
  }
  option = {
    backgroundColor: 'transparent',
    title: {
      text: '后台管理站点展示',
      subtext: '分布全国的站点',
      // sublink: 'http://www.pm25.in',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    bmap: {
      center: [170.114129, 19.550339],
      zoom: 4,
      roam: true,
      mapStyle: {
        styleJson: [
          {
            featureType: 'water',
            elementType: 'all',
            stylers: {
              color: '#044161'
            }
          },
          {
            featureType: 'land',
            elementType: 'all',
            stylers: {
              color: '#004981'
            }
          },
          {
            featureType: 'boundary',
            elementType: 'geometry',
            stylers: {
              color: '#064f85'
            }
          },
          {
            featureType: 'railway',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'highway',
            elementType: 'geometry',
            stylers: {
              color: '#004981'
            }
          },
          {
            featureType: 'highway',
            elementType: 'geometry.fill',
            stylers: {
              color: '#005b96',
              lightness: 1
            }
          },
          {
            featureType: 'highway',
            elementType: 'labels',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'arterial',
            elementType: 'geometry',
            stylers: {
              color: '#004981'
            }
          },
          {
            featureType: 'arterial',
            elementType: 'geometry.fill',
            stylers: {
              color: '#00508b'
            }
          },
          {
            featureType: 'poi',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'green',
            elementType: 'all',
            stylers: {
              color: '#056197',
              visibility: 'off'
            }
          },
          {
            featureType: 'subway',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'manmade',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'local',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'arterial',
            elementType: 'labels',
            stylers: {
              visibility: 'off'
            }
          },
          {
            featureType: 'boundary',
            elementType: 'geometry.fill',
            stylers: {
              color: '#029fd4'
            }
          },
          {
            featureType: 'building',
            elementType: 'all',
            stylers: {
              color: '#1a5787'
            }
          },
          {
            featureType: 'label',
            elementType: 'all',
            stylers: {
              visibility: 'off'
            }
          }
        ]
      },
    },
    series: [
      {
        name: 'pm2.5',
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: convertData(data),
        symbolSize: function (val, even) {
          return val[2] / 10
        },
        encode: {
          value: 2,
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: false,
        },
        emphasis: {
          label: {
            show: true,
          },
        },
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: convertData(
            data
                .sort(function (a, b) {
                  return b.value - a.value
                })
                .slice(0, 20)
        ),
        symbolSize: function (val) {
          // console.log(1)
          return val[2] / 10
        },
        encode: {
          value: 2,
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
        },
        label: {
          formatter: '{b}',
          position: 'right',
          show: true,
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#333',
        },
        emphasis: {
          scale: true,
        },
        zlevel: 1,
      },
    ],
  }
  getByName(option.series[0].data[0].name)

  option && myChart.setOption(option)
  myChart.on('click', function (params) {
    getByName(params.data.name)
  })
})
const siteData = ref([])
const getByName = async (even) => {
  siteName.value=even
  const {code, message, data} = await getSiteDataByName(even);
  console.log(data)
  if (code == 200) {
    siteData.value = data;
    var myChart = echarts.init(datc.value)
    var option

    option = {
      title: {
        text: even,
        left: 'center',
        textStyle: {
          color: 'white',
          fontFamily:"黑体"
        }
      },
      tooltip: {
        trigger: 'item',
      },
      // },
      legend: {
        orient: 'vertical',
        left: 'left',
        icon: 'circle',
        textStyle: {
          color: 'white'
        }
      },
      series: [
        {
          name: '电池统计',
          type: 'pie',
          radius: '70%',
          data: siteData.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ],
    }
    option && myChart.setOption(option)

    //进行数据的更改
    var c=document.getElementById("rowup");
    var ul=document.createElement("ul");
    // ul.innerHTML("<li>")

  }
}


const getUsers=async ()=>{
  const {code,message,data}=await getAllUser();
  console.log(data)
  let optinosDate=[]
  let nums=[]
  data.slice(0,7)
  data.slice(0,7).forEach(even=>{
    var str=even.split(":");
    console.log(str)
    var b=str[1].split("\\");
    optinosDate.push((b[0].substring(1)+":"+str[2].split("\\")).substring(0,5))
    var num=str[3].split("}")[0];
    nums.push(num)
  })
  console.log(optinosDate)
  console.log(nums)
  nums.push(data[data.length-1])
  var myChart1 = echarts.init(userData.value);
  var option1;

  option1 = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: optinosDate
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: nums,
        type: 'line',
        areaStyle: {}
      }
    ]
  };
  option1 && myChart1.setOption(option1);
}
//进行时间日期转换
const dateFormat=(date)=>{
  var numDate=new Date(date*1);
  console.log(numDate)
}

const DateList = ref([])
const UseList = ref([])
const getData = async () => {
  DateList.value = []
  // 获取数据
  const { data } = await getUseList()
  DateList.value = data.dateList
  UseList.value = data.useList
  drawLine()
}
const drawLine = () => {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(siteDataDom.value)
  // 绘制图表配置
  let option = {
    tooltip: {},
    xAxis: {
      data: DateList.value,
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: UseList.value,
      },
    ],
  }
  // 窗口大小自适应方案
  myChart.setOption(option)
  setTimeout(function() {
    window.onresize = function() {
      myChart.resize()
    }
  }, 200)
}

const getSiteSeata=async ()=>{
  const {code,message,data}=await getSiteSeataData();
  var myChartSite = echarts.init(siteSeate.value);
  var optionSite;
  optionSite = {
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   top: '1%',
    //   left: 'center',
    //   textStyle:{
    //     color:"white"
    //   }
    // },
    series: [
      {
        name: '站点数量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        // padAngle: 5,
        itemStyle: {
          borderRadius: 10
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ]
  };

  optionSite && myChartSite.setOption(optionSite);

}

const goHome=()=>{
  router.push("/")
}
</script>